<template>
    <div id="base-line" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
// import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import { GridComponent, type GridComponentOption } from 'echarts/components';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// import { useChartsStore } from '@/stores/charts';
// const pinia = createPinia();
// const chartStore = useChartsStore(pinia)
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

type EChartsOption = echarts.ComposeOption<
  GridComponentOption | LineSeriesOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('base-line')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        grid: {
            top: 20,
            left: '4%',
            right: '6%',
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: { show: true, color: '#c3c6ce' },
            data: props.data.xAxisDataList
        },
        yAxis: {
            type: 'value',
            axisLabel: { show: true, color: '#c3c6ce' },
            splitLine:{show: true, lineStyle:{color: '#19485d'}},
            axisLine: { show: true },
            axisTick: { show: true },
        },
        series: [
            {
            data: props.data.seriesDataList,
            type: 'line',
            areaStyle: { color: '#316a90'},
            // smooth: true
            }
        ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>